<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <div th:replace="template :: head-common"></div>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table-locale-all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="stylesheet">
    <style>

        .table {
            width: 900px;
        }
    </style>
</head>
<body>
<div th:replace="template :: sidebar-nav"></div>
<div th:replace="template :: top-bar"></div>
<div class="content">
    <button class="btn-success btn pull-right btn-add" type="button">添加</button>
    <table class="table-bordered table-striped table">

    </table>
</div>

</body>
<div style="display: none;padding: 20px" class="add-from">

    <form class="add-user-form">

        <div class="form-group">
            <label for="name">用户名：</label>
            <input type="text" class="form-control" name="name" placeholder="姓名">
        </div>
        <div class="form-group">
            <label for="username">性别：</label>
            <input type="text" class="form-control" name="gender" placeholder="性别">
        </div>
        <div class="form-group">
            <label for="username">与户主关系：</label>
            <input type="text" class="form-control" name="relationship" placeholder="与户主关系">
        </div>
        <div class="form-group">
            <label for="username">身份证号码：</label>
            <input type="text" class="form-control" name="idCardNo" placeholder="身份证号码">
        </div>
        <div class="form-group">
            <label for="username">电话号码：</label>
            <input type="text" class="form-control" name="telephone" placeholder="电话号码">
        </div>
        <div class="form-group">
            <label for="username">职业：</label>
            <input type="text" class="form-control" name="occupation" placeholder="职业">
        </div>
    </form>
    <div class="form-group">
        <button class="btn btn-success add-user-btn" type="button"> 添加</button>
    </div>
</div>
<script>
    var $table = $(".table");
    $(function () {
        $(".nav-li").removeClass("sidebar-selected");
        $("#page-user").addClass("sidebar-selected");

        $table.bootstrapTable({
            striped: true,
            width: "900",
            data: [
                {
                    id: 1,
                    name: "123",
                    age: 1
                },
                {
                    id: 1,
                    name: "123",
                    age: 1
                },
                {
                    id: 1,
                    name: "123",
                    age: 1
                },
                {
                    id: 3,
                    name: "123",
                    age: 1
                },
                {
                    id: 15,
                    name: "33423",
                    age: 1
                },
                {
                    id: 1,
                    name: "123",
                    age: 1
                },
            ],
            columns: [
                {
                    field: "id",
                    title: "id"
                },
                {
                    field: "name",
                    title: "name"
                }, {
                    field: "age",
                    title: "age"
                }, {
                    field: "name",
                    title: "name"
                }, {
                    field: "name",
                    title: "name"
                },

            ]

        });

        $(".btn-add").click(function () {
            layer.open({
                type: 1,
                // shade: false,
                shadeClose: true,
                title: "添加", //不显示标题
                content: $(".add-from")
            });
        });

        $(".add-user-btn").click(function () {
            var f = $("form.add-user-form");

            $.ajax({
                url: '/user/add?token=' + getAccesstoken(),
                type: "post",
                contentType: "application/json",
                data: f.serialize(),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', getToken());
                },
                success: function (resp) {

                }
            })
        });
    });
</script>
</html>